<template>
  <button
    class="SpiritEchoBtn"
    :class="[
      `SpiritEchoBtn--${type}`,
      `SpiritEchoBtn--${size}`,
      { 'SpiritEchoBtn--round': round },
      { 'SpiritEchoBtn--disabled': disabled },
    ]"
    :style="customStyle"
    :disabled="disabled"
  >
    <!-- 主要内容插槽（支持HTML标签） -->
    <slot>
      <!-- 默认文本（当无插槽内容时显示） -->
      <span
        class="SpiritEchoBtn__text"
        :class="`SpiritEchoBtn__text--${textType}`"
        :style="textStyle"
      >
        {{ text }}
      </span>
    </slot>
  </button>
</template>

<script>
export default {
  props: {
    // 文本样式类型
    textType: {
      type: String,
      default: "default",
      validator: (val) =>
        ["default", "primary", "success", "danger", "warning"].includes(val),
    },
    // 手动注入文本样式
    textStyle: {
      type: Object,
      default: () => ({}),
    },
    // 自定义按钮整体样式
    customStyle: {
      type: Object,
      default: () => ({}),
    },
    // 按钮类型（控制背景色）
    type: {
      type: String,
      default: "default",
      validator: (val) =>
        ["default", "primary", "success", "danger", "warning"].includes(val),
    },
    // 按钮尺寸
    size: {
      type: String,
      default: "large",
      validator: (val) => ["small", "medium", "large"].includes(val),
    },
    // 是否圆角
    round: {
      type: Boolean,
      default: false,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 默认文本（无插槽时显示）
    text: {
      type: String,
      default: "按钮",
    },
  },
};
</script>

<style lang="scss">
  @use 'sass:map';

// 核心变量（精简且可维护）
$btn-height: (
  small: 36px,
  medium: 42px,
  large: 48px
);
$btn-border-radius: (
  default: 2px,
  round: 20px
);
$btn-border-color: #e6d4d4;
$btn-transition: all 0.2s ease;
$hover-opacity: 0.9;
$disabled-opacity: 0.7;

// 文本颜色变量
$text-colors: (
  default: #541414,
  primary: #4b96d7,
  success: #67c23a,
  danger: #f56c6c,
  warning: #e6a23c
);

// 按钮背景色变量
$bg-colors: (
  default: #fff,
  primary: #4b96d7,
  success: #67c23a,
  danger: #f56c6c,
  warning: #e6a23c
);


.SpiritEchoBtn {


  // 基础样式
  width: 100%;
  height: map-get($btn-height, large); 
  border-radius: map-get($btn-border-radius, default);
  border: 1px solid $btn-border-color;
  transition: $btn-transition;
  cursor: pointer;
  display: inline-flex; // 支持内部元素对齐
  align-items: center;
  justify-content: center;
  box-sizing: border-box; // 盒模型统一（避免宽度溢出）

  // 文本样式
  &__text {
    transition: $btn-transition;
  }

  // 文本主题颜色（循环生成，精简代码）
  @each $key, $color in $text-colors {
    &__text--#{$key} {
      color: $color;
      font-size: if($key == default, 12px, 14px); // 基础文本稍小
      font-weight: if($key == default, 500, 600);
    }
  }

  // 按钮类型背景色（循环生成）
  @each $key, $color in $bg-colors {
    &--#{$key} {
      background: $color;
      // 默认类型单独处理边框
      @if $key == default {
        border-color: #ddd;
      }
    }
  }

  // 尺寸样式（循环生成）
  @each $key, $height in $btn-height {
    &--#{$key} {
      height: $height;
      padding: 0 16px; // 统一内边距，避免内容挤压
      font-size: 12px;
    }
  }

  // 圆角样式
  &--round {
    border-radius: map-get($btn-border-radius, round);
  }

  // 禁用状态
  &--disabled {
    cursor: not-allowed;
    opacity: $disabled-opacity;
  }

  // 交互效果（排除禁用状态）
  &:not(&--disabled) {
    &:hover {
      opacity: $hover-opacity;
      transform: translateY(-1px);
    }
    &:active {
      transform: translateY(0);
    }
  }
}
</style>